<template>
  <div class="data-view">
    <div class="data-head">
      <div class="head-start">
        <slot name="head-start"></slot>
      </div>
      <div class="head-center">
        <slot name="head-center">
          <el-radio-group v-model="value.mode" size="mini">
            <el-radio-button label="none">none</el-radio-button>
            <el-radio-button label="formdata">form-data</el-radio-button>
            <el-radio-button label="urlencoded">x-www-form-urlencoded</el-radio-button>
            <el-radio-button label="raw">raw</el-radio-button>
            <el-radio-button label="file">binary</el-radio-button>
          </el-radio-group>
        </slot>
      </div>
      <div class="head-end">
        <div v-if="value.mode === 'formdata'">
          <el-button @click="handleChangeType('formdata')" size="mini" icon="el-icon-sort">{{ formdataTypeTitle }}编辑</el-button>
        </div>
        <div v-else-if="value.mode === 'urlencoded'">
          <el-button @click="handleChangeType('urlencoded')" size="mini" icon="el-icon-sort">{{ urlencodedTypeTitle }}编辑</el-button>
        </div>
        <div v-else-if="value.mode === 'raw'" class="raw-action">
          <div class="action-item">
            <el-select v-model="value.options.raw.language" size="mini" placeholder="请选择">
              <el-option
                v-for="item in rawOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="action-item">
            <el-button size="mini" icon="el-icon-set-up">美化</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="data-body">
      <slot name="body-center">
        <div v-if="value.mode === 'formdata'">
          <DataKeyValue v-show="formdataTypeValue === 'keyvalue'" :value="value.formdataValue" :columns="keyCatFormdataColumns" />
          <DataRow v-show="formdataTypeValue === 'text'" :value="value.formdataValue" :columns="keyCatFormdataColumns" />
        </div>
        <div v-else-if="value.mode === 'urlencoded'">
          <DataKeyValue v-show="urlencodedTypeValue === 'keyvalue'" :value="value.urlencodedValue" :columns="encodedColumns" />
          <DataRow v-show="urlencodedTypeValue === 'text'" :value="value.urlencodedValue" :columns="encodedColumns" />
        </div>
        <div v-else-if="value.mode === 'raw'">
          <DataRaw v-model="value.rawValue"></DataRaw>
        </div>
        <div v-else-if="value.mode === 'file'">
          <DataFileDrag v-model="value.fileValue"></DataFileDrag>
        </div>
        <div v-else>
          <div class="data-none">请求无Body</div>
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
import DataRow from '../data/row.vue'
import DataKeyValue from '../data/key-value.vue'
import DataRaw from '../data/raw.vue'
import DataFileDrag from '../data/file-drag.vue'
import columns from '../constant/key-value-columns.js'
import keyCatFormdataColumns from '../constant/key-cat-formdata-columns.js'
import encodedColumns from '../constant/key-value-encoded-columns.js'

export default {
  components: {
    DataRow,
    DataKeyValue,
    DataRaw,
    DataFileDrag
  },

  props: {
    columns: {
      default () {
        return columns
      }
    },
    value: {
      default () {
        return {
          mode: 'none',
          formdataValue: [],
          urlencodedValue: [],
          rawValue: '',
          fileValue: {},
          options: {
            raw: {
              language: 'text'
            }
          }
        }
      }
    }
  },

  data () {
    return {
      keyCatFormdataColumns,
      encodedColumns,
      typeList: [
        {text: '文本', value: 'text'},
        {text: '键值对', value: 'keyvalue'}
      ],
      formdataTypeValue: 'keyvalue',
      formdataTypeTitle: '文本',
      urlencodedTypeValue: 'keyvalue',
      urlencodedTypeTitle: '文本',
      rawOptions: [
        {
          value: 'text',
          label: 'Text'
        },
        {
          value: 'json',
          label: 'JSON'
        },
        {
          value: 'html',
          label: 'HTML'
        },
        {
          value: 'xml',
          label: 'XML'
        },
        {
          value: 'javascript',
          label: 'JavaScript'
        }
      ]
    }
  },

  methods: {
    // 切换编辑类型
    handleChangeType (type) {
      let list = this.typeList
      let typeValue = this.urlencodedTypeValue
      if (type === 'formdata') {
        typeValue = this.formdataTypeValue
      }
      let index = list.findIndex(item => item.value === typeValue)
      let next = index + 1 > list.length - 1 ? 0 : index + 1
      typeValue = list[next].value
      next = next + 1 > list.length - 1 ? 0 : next + 1
      let title = list[next].text
      if (type === 'formdata') {
        this.formdataTypeTitle = title
        this.formdataTypeValue = typeValue
      } else {
        this.urlencodedTypeTitle = title
        this.urlencodedTypeValue = typeValue
      }
      this.$emit('type-change', { value: typeValue })
    }
  }
}
</script>

<style lang="less" scoped>
.data-view {
  .data-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
  }
  .head-start:not(:empty) + .head-center {
    padding-left: 8px;
  }
  .head-center {
    flex: 1;
    padding: 0 8px 0 0;
  }
  .raw-action {
    display: flex;
    .action-item {
      margin-left: 8px;
    }
    /deep/.el-select {
      width: 120px;
    }
  }
}
.data-none {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  background: #f0f0f0;
  color: #999;
  font-size: 12px;
}
</style>